<template>
	<view>
		<view>
			<u-navbar :is-back="false" title="圈子" :background="background" title-color="#ffffff">
				<view class="slot-wrap">					
					<u-icon name="plus" color="#ffffff" size="40" @click="TowAddCircle()">
					</u-icon>
				</view>
			</u-navbar>
			<view class="content">
				<u-card v-for="item in Data" v-show="item.circleTows.length>0">
					<view slot="head">
						<!-- 店铺图片    店铺名字 -->
						<u-avatar :src="item.stores.storeImg"></u-avatar>{{item.stores.storeName}}					
					</view>
					<view slot="body">
						<view>
							<template v-for="c in item.circleTows">
								<!-- 圈子 内容 -->
								<u-icon size="34" color="" :label="c.circleText"></u-icon>
								<u-button @click="pinglun(c.circleId)" class="button" size="mini" shape="circle" style="color: #FA436A;">评论</u-button>
								<view style="margin-top: 20px;">									
									<template v-for="a in c.orderDetails">	
										<template v-for="b in a.pictures">
											<!-- 商品图片、 -->
											<image style="width: 120px; height: 120px;" :src="b.pictureUrl" mode="aspectFill"></image>
										</template>		
										<!-- 商品名字																		 -->
										<u-section style="margin-top: 10px;" :show-line=false :title="a.orderDetailName" @click="xiangqing(a.orderDetailId)"></u-section>     
									</template>				
								</view>
							</template>
						</view>
					</view>
				</u-card>
			</view>
		</view>
	</view>

</template>
<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#FA436A',
				},
				Data: [],
				beforeUserId:'',
				show: false,
				//余额
				balance:''
			};
		},
		onLoad: function() { //opthin为object类型，会序列化上页面传递的参数
			// this.item = JSON.parse(option.item)
			uni.getStorage({
				key:'beforeUser',
				success: (res) => {
					this.beforeUserId = res.data.beforeUserId
				}
			})
			this.getData();
			
		},
		methods: {
			//跳转评论页面
			pinglun(circleId){
				uni.navigateTo({
					url:'/pages/comment/index?circleId='+circleId
				})
			},
			//查看余额
			TowBalance(){
				uni.request({
					url: 'http://localhost:9090/before/bgs/circle/TowBalance',
					method: 'GET',
					data:{
						beforeUserId: this.beforeUserId
					},
					success: (res) => {
						console.log(res.data.data)
						this.balance = res.data.data.data.balance
					}
				});
			},
			TowAddCircle(){
				uni.navigateTo({
				    url: '/pages/category/AddCircle'
				});
			},
			getData() {
				uni.request({
					url: 'http://localhost:9090/before/bgs/circle/TowGetData',
					method: 'GET',
					data:{
						beforeUserId: this.beforeUserId
					},
					success: (res) => {
						console.log(res.data.data)
						this.Data = res.data.data.list
						uni.setStorage({
						    key: 'Data',
						    data: this.Data,
						    success: function () {
						        console.log('success');
						    }
						});
					}
				});
			},
			xiangqing(a){
				this.circleid = a
				uni.navigateTo({
				    url: '/pages/addshop/commoditydetails/commoditydetails?shangpinid='+this.circleid
				});
			}
		},
	};
</script>
<style lang="scss">
	.comment-box-item {
		display: flex;
	}
	.slot-wrap {
		margin-left: 90%;
	}
	.title {
		color: #FFFFFF;
	}
	.button {
		float: right;
	}
</style>
